<!-- author kangdong -->
<template>
  <div class='login'>
        <el-form :model="ruleForm2"  ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
            <h3 class="title">注册</h3>
            <el-form-item prop="account">
                <el-input type="text" autofocus v-model="mobile" placeholder="请输入您的手机号" @blur="testFn"></el-input>
            </el-form-item>
            <div id="testBtn" class="mb20" ref="capt"></div>
            <el-form-item prop="checkPass" v-if="isShow">
                <el-input type="password"  v-model="code" placeholder="请输入6位验证码"  style="width:216px;"></el-input>
                <el-button type="button" :class="{btn: true, disabled: isDisabled}" style="width:130px;">{{btnTxt}}</el-button>
                
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click.native.prevent="mobileLogin"  :loading="logining">注册</el-button>
            </el-form-item>
        </el-form>

        
  </div>
</template>

<script>
export default {
  data() {
    return {
      logining: false,
      isShow: false,
      pid: this.$route.query.pid,
      typeIndex: 1,
      isDisabled: false,
      btnTxt: "获取验证码",
      userName: "", // 账号
      password: "", // 密码
      mobile: "", // 手机号
      code: "", // 验证码
      result: "", // 验证结果
      ruleForm2: {
        account: "",
        checkPass: ""
      }
    };
  },

  components: {},

  computed: {},

  mounted() {},
  methods: {
    //验证滑动解锁
    async testFn() {
      let self = this;
      if (!self.$fn.isMobilePhone(this.mobile)) {
        self.$message({
            type: "error",
            message: `请您输入正确的手机号`
          });
          return;
        self.$refs.capt.innerHTML = "";
      } else {
        self.$post({ url: `/geet/code/${self.mobile}`, data: {} }).then(res => {
          if (res.code === "0") {
            self.$refs.capt.innerHTML = "";
            let data = JSON.parse(res.data);
            let handler = function(captcha) {
              captcha.appendTo("#testBtn");
              window.gt = captcha;
              captcha.onSuccess(() => {
                self.result = captcha.getValidate();
                self.isShow = true;
                self.sendAuthCode();
                setTimeout(() => {
                  self.$refs.capt.innerHTML = "";
                }, 1000);
              });
              captcha.onError(error => {
                self.$message.error({
                  message: error
                });
                captcha.reset();
              });
            };
            window.initGeetest(
              {
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "popup", // 产品形式，包括：float(点击汉字)，popup(滑动)
                width: "100%"
              },
              handler
            );
          }
        });
      }
    },
    // 手机号登录
    async mobileLogin() {
      let self = this;
      if (!self.result) {
        self.$message({
          type: "error",
          message: "请您完成验证!"
        });
        return;
      }
      let res = await self.$post({
        url: "/user/login/mobile",
        data: {
          mobile: self.mobile,
          validateCode: self.code,
          challenge: self.result.geetest_challenge,
          seccode: self.result.geetest_seccode,
          validate: self.result.geetest_validate
        }
      });
      if (res.status === "SUCCESS") {
        self.$store.commit("setToken", res.data.token);
        self.$store.commit(
          "setNickName",
          res.data.member.nikeName || res.data.member.userName
        );
        localStorage.setItem("hasPassword", res.data.hasPassword);
        localStorage.setItem("hasPayPassword", res.data.hasPayPassword);
        self.$fn.addImFile();
      } else {
        self.testFn();
        self.result = "";
        self.$message({
          type: "error",
          message: res.msg
        });
      }
    },

    // 发送验证码
    async sendAuthCode() {
      console.log("验证码");
      let self = this;
      if (!self.$fn.isMobilePhone(this.mobile)) {
        this.$message({
          type: "error",
          message: `请您输入正确的手机号！`
        });
        return;
      }
      self.isDisabled = true;
      let time = 120;
      let setInter = setInterval(() => {
        time--;
        self.btnTxt = `发送验证码(${time})`;
        if (time <= 0) {
          self.btnTxt = "获取验证码";
          self.isDisabled = false;
          clearInterval(setInter);
          setInter = null;
        }
      }, 1000);

      let res = await self.$get({
        url: `/user/getRegisterCode/${self.mobile}`
      });
      if (res.status === "SUCCESS" && res.code === "0") {
        this.$message({
          type: "success",
          message: `已成功发送验证码到您手机，请查收！`
        });
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
}
.test {
  display: flex;
  justify-content: space-between;
  .remember {
    font-size: 16px;
    cursor: pointer;
  }
}
.mb20{
    margin-bottom: 22px;
}
</style>
